<template>
  <div>
    <el-dialog v-model="dialogVisible" width="80%" align-center :show-close="false" draggable>
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>{{ title }}</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <div class="my-[10px] px-[10px]" style="color: red">评审专家不能评审自己参与的项目</div>
      <div class="bg-white">
        <BaseTable>
          <tr>
            <td class="td-name">项目学科</td>
            <td>
              <CommonTreeLabel :value="detailData.subjectId" isFetch paramsName="一级学科" />
            </td>
            <td class="td-name">项目名称</td>
            <td>{{ detailData.name }}</td>
          </tr>
          <tr>
            <td class="td-name">项目成员</td>
            <td>{{ detailData.memberNames }}</td>
            <td class="td-name">评审专家</td>
            <td>{{ expertNames.join("，") }}</td>
          </tr>
          <tr>
            <td class="td-name">学科专家</td>
            <td style="width: 87.5%" colspan="3">
              <el-checkbox-group v-model="selectExperts">
                <el-checkbox
                  :label="item.name"
                  :value="item.id"
                  v-for="item in expertList"
                  :key="item.id"
                  :disabled="memberIds.includes(item.personId)"
                />
              </el-checkbox-group>
            </td>
          </tr>
        </BaseTable>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" @click="save">确定</el-button>
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import { getExpertList, addExperts } from "@/api/project/xj/xmps/psxm";
import { sbMemberDetail } from "@/api/project/xj/sbxm";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const operateType = ref(0); //0：新增 1：修改
const bookId = ref(null);
const detailData = ref({});
const expertList = ref([]);
const selectExperts = ref([]);
const memberIds = ref([]); //项目成员id
const title = computed(() => {
  return operateType.value ? "调整专家" : "指派专家";
});
//显示的专家名称
const expertNames = computed(() => {
  const expertArray = [];
  expertList.value.forEach((item) => {
    if (selectExperts.value.includes(item.id)) {
      expertArray.push(item.name);
    }
  });
  return expertArray;
});
//获取成员信息
const getMemberList = async () => {
  const params = {
    id: bookId.value,
  };
  try {
    const res = await sbMemberDetail(params);
    const memberList = res.data.members;
    memberIds.value = [];
    memberList.forEach((item) => {
      memberIds.value.push(item.personId);
    });
  } catch (error) {
    console.log(error);
  }
};
//获取数据详情
const getDetail = async () => {
  const params = {
    bookIdList: bookId.value,
  };
  try {
    const res = await getExpertList(params);
    detailData.value = res.data[0];
    expertList.value = res.data[0].allExpert;
    selectExperts.value = res.data[0].reviewerIds.split(",");
  } catch (error) {
    console.log(error);
  }
};
// 编辑
const edit = (id, type) => {
  bookId.value = id;
  operateType.value = type;
  dialogVisible.value = true;
  getMemberList();
  getDetail();
};
defineExpose({ edit });
const emit = defineEmits(["save-success"]);
//点击保存
const save = async () => {
  try {
    const experts = expertList.value.filter((item) => {
      return selectExperts.value.includes(item.id);
    });
    let params = [
      {
        bookId: bookId.value,
        expertsList: experts,
      },
    ];
    const res = await addExperts(params);
    if (res.code === 200) {
      ElMessage({
        message: "操作成功！",
        type: "success",
      });
      emit("save-success");
      dialogVisible.value = false;
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
